//首页-快捷入口
import logo from './logo.svg';
import './App.scss';

import React, { Component } from 'react';
import axios from 'axios';
import { index_nav,index_goodlist} from './utils/api'

class App extends Component {
  constructor(props) {
    super(props);
    let pic01 = 'https://pic.cdfgsanya.com/assets/upload/visual/b33ce4725f99beef9c14d11f60455ec7.png?1663652087270'
    let pic = 'https://pic.cdfgsanya.com/assets/upload/visual/dae93bb7ea340a140ee66921dec81430.jpg?1667206622916'
    this.state = {//初始化组件状态
      pic,
      pic01,
      header: [
        { title: 'cdf 会员购', p: '足不出户 尊享全球奢品' }
      ],
      list:[],
      goods:[],
      tabbar: [
        { name: '店铺', logo },
        { name: '分类', logo },
        { name: '全部商品', logo },
        { name: '购物车', logo },
        { name: '个人中心', logo },
      ]
    }
  }
  componentDidMount(){
    //导航接口
    index_nav().then((res)=>{
      // console.log(res.data);
      this.setState(
        {
          list:res.data.list
        }
      )
    });
    index_goodlist().then((res)=>{
      // console.log(res.data);
      this.setState({
        goods:res.data.list
      })
    })

  }
  render() {
    return (
      <div className='App'>
        <div className="header">
          {
            this.state.header.map((item, index) => {
              return (
                <div className="title" key={index}>
                  <h1>{item.title}</h1>
                  <span>{item.p}</span>
                </div>
              )
            })
          }
          {/* 渲染头部输入 */}
          <div className='inputBox'>
            <input type="text" placeholder='搜索商品' />
            <span>客服</span>
          </div>
        </div>
        {/* 渲染轮播图 */}
        <div className='swipe'>
          <img src={this.state.pic} alt="" />
        </div>
        {/* 渲染快捷入口列表 */}
        <div className='entry'>
          <h3>1分抵1元。请您点击此处查看《购物须知》</h3>
          {
            this.state.list.map((item, index) => {
              return (
                <div className="classify" key={index}>
                  <img src={item.pic} alt="" />
                  <span>{item.name}</span>
                </div>
              )
            })
          }
        </div>
        {/* 渲染今日值得买 */}
        <div className='seckill'>
          <img src={this.state.pic01} alt="" />
        </div>
        {/* 商品 */}
        <div className="goods">
        {
          this.state.goods.map((item,index)=>{
            return(
              <div className="singleGoods" key={index}>
                <img src={item.pic} alt="" />
                <div className='name'>{item.name}</div>
                <div className='desc'>
                  <span>{item.effectList[0]}</span>
                  <span>{item.effectList[1]}</span>
                  <span>{item.effectList[2]}</span>
                  <span>{item.effectList[3]}</span>
                </div>
                <div className='price'>￥{item.salesPrice.value}</div>
                <div className="active">
                  <span>{item.activityTags[0]}</span>
                  <span>{item.activityTags[1]}</span>
                  <span>{item.activityTags[2]}</span>
                </div>
              </div>
            )
          })
        }
        </div>
        {/* 渲染底部 */}
        <div className='tabbar'>
          {
            this.state.tabbar.map((item, index) => {
              return (
                <div className="classify" key={index}>
                  <img src={item.logo} alt="" />
                  <span>{item.name}</span>
                </div>
              )
            })
          }
        </div>
      </div>
    );
  }
}

export default App;